<template>
  <div class="dashboard-editor-container">
    
      <el-row style="margin-left: -6px; margin-right: -6px;">
        <el-col :span="8" style="padding-left: 6px; padding-right: 6px;">
          <el-card>
             今日订单数
              <el-divider></el-divider>
              {{ cardData.today_order_count }}
            
          </el-card>
        </el-col>
        <el-col :span="8" style="padding-left: 6px; padding-right: 6px;">
          <el-card>
             今日日活
              <el-divider> </el-divider>
              {{ cardData.conversion_rate }}
        
          </el-card>
        </el-col>
        <el-col :span="8" style="padding-left: 6px; padding-right: 6px;">
          <el-card>
            <div> 今日销量总价
              <el-divider></el-divider>
              {{ cardData.dau }}
            </div>
          </el-card>
        </el-col>

      </el-row>
    

    <div id="main" style="width: 100%; height:650px ;  margin-top:40px ;background-color: white;padding: 20px;">

    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapGetters } from 'vuex'
import PanThumb from '@/components/PanThumb'
import GithubCorner from '@/components/GithubCorner'
import { getEchartsData, getCardData } from '@/api/user';
export default {

  name: 'DashboardEditor',
  components: { PanThumb, GithubCorner },
  data() {
    return {
      echartsData: {},
      cardData:{}
    }
  },

  mounted() {

    getEchartsData().then(res => {
      if (res.code == 1) {
        this.echartsData = res.data
        // console.log(this.echartsData)
        getCardData().then(res=>{
          if(res.code==1){
            this.cardData=res.data
          }
        })
      }
    }).then(res => {
      let myChart = echarts.init(document.getElementById('main'));
     // console.log(this.echartsData)
      let order_total = this.echartsData.order_total
      let sale_price_total = this.echartsData.sale_price_total
      let consumption_per_person = this.echartsData.consumption_per_person
      let new_order = this.echartsData.new_order

     // console.log(order_total,sale_price_total,consumption_per_person,new_order)
      let option = {
        title: {
          text: '商品销量一览表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          show: true
        },
        xAxis: {
          type: 'category',
          data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '订单总数',
            type: 'line',
            data: order_total,
            areaStyle:{ }  ,
            stack:'num' ,
         
          },
          {
            name: '销量总价',
            type: 'line',
            data: sale_price_total,
            areaStyle:{},
            stack:'num' ,
        

          },
          {
            name: '人均消费',
            type: 'line',
            data: consumption_per_person,
            areaStyle:{},
            stack:'num' ,
           
          },
          {
            name: '近十分钟新增订单数',
            type: 'line',
            data: new_order,
            areaStyle:{},
            stack:'num',
           
          },
        ]
      };

      myChart.setOption(option)
    })

  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #e3e3e3;
  height: 100vh;
  padding: 50px 60px 0px;

}
</style>
